<script setup>
import _ from 'lodash'
import {computed, onMounted, ref, watch} from "vue";
import {useCommonStore} from "@jzl/stores";
import {api} from "@jzl/api";
import { FILE_ZD } from '@jzl/comps/constants.js';

defineOptions({
  name: 'TanantProfile'
})

const emit = defineEmits(['cancel:win', 'confirm:win'])
const props = defineProps({
  isView: {
    type: Boolean,
    default: false
  }
})

const isEdit = ref(false)
const form = ref({
  project_logo: '',
  project_ico: '',
  project_domain: '',
  project_name: '',
  project_desc: '',
  project_detail: '',
  images: []
})
const addImage = ref(null);

onMounted(async () => {
  await init()
})

const init = async () => {
  let project = useCommonStore().project;
  let pid = project?.project_id;

  if(!pid) {
    project = await api.project.getCurrentProject();
    pid = project?.project_id;
  }

  let iForm = await api.project.getProject(pid);
  if (iForm) form.value = iForm;
}

/*const showEdit = () => {
  isEdit.value = true;
}

const hideEdit = () => {
  isEdit.value = false;
}*/

const handleCancel = () => {
  emit('cancel:win')
}

const edit = async () => {
  let logo = "";
  let ico = "";

  if (_.isString(form.value.project_logo)) {
    logo = form.value.project_logo;
  } else if (_.hasIn(form.value.project_logo, "file_path")) {
    logo = _.get(form.value.project_logo, "file_path");
  } else if (_.hasIn(form.value.project_logo, "value")) {
    let val = _.get(form.value.project_logo, "value");
    if (_.isString(val)) logo = val;
  }

  if (_.isString(form.value.project_ico)) {
    ico = form.value.project_ico;
  } else if (_.hasIn(form.value.project_ico, "file_path")) {
    ico = _.get(form.value.project_ico, "file_path");
  } else if (_.hasIn(form.value.project_ico, "value")) {
    let val = _.get(form.value.project_ico, "value");
    if (_.isString(val)) ico = val;
  }

  let data = await api.project.update(_.get(form.value, "project_id"), {
    project_name: form.value.project_name,
    project_desc: form.value.project_desc,
    project_detail: form.value.project_detail,
    project_logo: logo,
    project_ico: ico,
    images: form.value.images
  });

  if (data) {
    useCommonStore().setProject(data);
  }
  // isEdit.value = false;

  emit('confirm:win')
}

const handleDelItem = (idx) => {
  if (!form.value || !form.value.images) return;

  if (form.value.images.length > idx) {
    form.value.images.splice(idx, 1);
  }
}

const handleFileAdd = (file) => {
  let file_path = _.get(file, "file_path");
  let id = _.get(file, "id");
  if (!file || !file_path) return;

  if (!form.value.images) form.value.images = [];
  form.value.images.push({
    id,
    file_path
  });

  addImage.value = null;
}


const handleFileAddMulti = (selected) => {

  if(!selected || !selected.length) return;

  if(!form.value.images?.length) {
    form.value.images = [];
  }

  for(let i = 0; i < selected.length; i++) {
    let file = selected[ i ];
    let newFile = {
      id: file?.id,
      file_path: file?.file_path
    }

    form.value.images.push(newFile);
  }

  addImage.value = null;
}

const handleFileChange = (file, idx) => {
  let file_path = _.get(file, "file_path");
  let id = _.get(file, "id");
  if (!file || !file_path) return;

  if (_.isNumber(idx) && idx >= 0 && form.value.images.length > idx) {
    form.value.images[idx] = {
      id,
      file_path
    };
  }
}
</script>
<template>
  <div class="profile-container">
    <!--<h3 class="page-title"> 公司信息设置 </h3>-->
    <!--<data-form-form v-model="form" :items="items" :is-view="!isEdit"></data-form-form>-->
    <h5>此处基本资料，显示于后台管理的登录/系统内部框架 （<span class="red-tip">注意：部分信息重新登录后生效！</span>）</h5>
    <el-form
      ref="formRef"
      :model="form"
      label-width="130px"
    >
      <el-form-item label="LOGO">
        <div class="flex flex-col items-start">
          <div
            class="form-control-static"
            style="display:block;padding:0px;"
          >项目LOGO为正方形效果最佳，建议尺寸 160*160
          </div>
          <FilePicker
            v-model="form.project_logo"
            :is-view="isView"
            class="simple-picker"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="LOGO ico"
      >
        <div class="flex flex-col items-start">
          <div
            class="form-control-static"
            style="display:block;padding:0px;"
          >系统图标为 32*32 / 64*64 的正方形，显示在后台管理的浏览器Tab页上
          </div>
          <FilePicker
            v-model="form.project_ico"
            :is-view="isView"
            class="simple-picker"
            theme="mini"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="租户编码">
        <div
          class="item-info-readonly"
          v-text="form.project_domain"
        />
      </el-form-item>
      <el-form-item
        label="租户名称">
        <div
          class="item-info-readonly"
          v-text="form.project_name"
          v-if="isView"
        />
        <el-input
          v-model="form.project_name"
          v-else
        />
      </el-form-item>
<!--      <el-form-item label="登录图片">
        &lt;!&ndash;<img-picker v-model=""></img-picker>&ndash;&gt;
        <div class="item-images">
          <template v-for="(it, idx) in form.images">
            <FilePicker
              v-model="it.file_path"
              :is-view="isView"
              :accept-type="3"
              :height="60"
              @change="handleFileChange($event, idx)"
              @remove="handleDelItem(idx)"
            />
          </template>
          <FilePicker
            v-if="!isView"
            v-model:file="addImage"
            :is-add-multi="true"
            :accept-type="3"
            :height="60"
            @change="handleFileAdd"
          />
        </div>
      </el-form-item>-->
      <el-form-item
        label="租户简介"
        class="mb-2"
      >
        <div
          class="item-info-readonly"
          v-text="form.project_desc"
          v-if="isView"
        />
        <el-input
          v-else
          type="textarea"
          v-model="form.project_desc"
          rows="5"
        />
      </el-form-item>
    </el-form>
    <div class="actions" v-if="!isView">
<!--      <el-button
        type="primary"
        @click="showEdit()"
        v-if="!isEdit"
      >修改
      </el-button>-->
      <el-button
        @click="handleCancel()"
      >取消
      </el-button>
      <el-button
        type="primary"
        @click="edit"
      >保存
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-form-item) {
  margin-bottom: 5px;
}
.profile-container {
  //width: 800px;
  //margin: 10px auto;
  //padding: 20px;
  //background: #FFF;
  //border-radius: 10px;

  .el-form {
    //margin: 30px auto;
  }
  h5 {
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    margin: 5px;
  }

  .red-tip {
    text-align: center;
    color: red;
    font-size: 13px;
  }

  .actions {
    text-align: center;
    padding: 10px;
  }

  .item-images {
    display: flex;
    align-items: center;

    > div {
      margin-right: 10px;
    }
  }
}
</style>
